/** style.css **/
.app {
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading38 {
  --r-num: 45deg; /*定义角度值*/
  width: 40px;
  height: 40px;
  position: relative;
  animation: loading38-eff 1s steps(8) both infinite;
}
.load-span38 {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 3px;
  position: absolute;
  left: 17px; /* 移到中间位置 */
  top: 0;
  transform-origin: 3px 20px;
}
.load-span38:nth-of-type(1) {
  transform: rotate(var(--r-num));
  background: #2facfd;
}
.load-span38:nth-of-type(2) {
  transform: rotate(calc(var(--r-num) * 2));
  background: #33b4fd;
}
.load-span38:nth-of-type(3) {
  transform: rotate(calc(var(--r-num) * 3));
  background: #38befe;
}
.load-span38:nth-of-type(4) {
  transform: rotate(calc(var(--r-num) * 4));
  background: #3ecafe;
}
.load-span38:nth-of-type(5) {
  transform: rotate(calc(var(--r-num) * 5));
  background: #45d7fe;
}
.load-span38:nth-of-type(6) {
  transform: rotate(calc(var(--r-num) * 6));
  background: #4be4fe;
}
.load-span38:nth-of-type(7) {
  transform: rotate(calc(var(--r-num) * 7));
  background: #52f1ff;
}
.load-span38:nth-of-type(8) {
  transform: rotate(calc(var(--r-num) * 8));
  background: #57fbff;
}
@keyframes loading38-eff {
  to {
    transform: rotate(0deg);
  }
  from {
    transform: rotate(-360deg);
  }
}

/* 8个 spn 绘制8个圆点，分别写上不同的背景色；
通过 transform-origin 属性来定义变形的中心点，然后给每个圆点计算角度变形（这里我定义的角度值为 （360°/8 = 45°）），
注意这里的每次变形是基于上一个圆点的角度 +45deg；
最后给整体加上 animation 动画，并设置时间函数 steps() 为8，意思是分8次整体旋转完成 360deg。 */
